<template>
<div>
<h1>{{ sum }}</h1>
<h1>{{ person.name }}</h1>
<button @click="sum++">sum++</button>
<button @click="person.name='李四'">person.name='李四'</button>
<h1>sum2:{{ sum2 }}</h1>
<h1>person2:{{ person2.name }}</h1>
<button @click="changeSum2">sum2++</button>
<button @click="person2.name='李四'">person2.name='李四'</button>
<h1>person3:{{ person3.name }};{{ person3.car.name }}</h1>
<button @click="person3.name='李四'">person3.name='李四'</button>
<button @click="person3.car.name='奔驰'">person3.car.name='奔驰'</button>
</div>
</template>

<script setup lang="ts">
import { ref ,reactive ,readonly,shallowReadonly} from 'vue';

const sum = ref(0);
const sum2 = readonly(sum);
const person = reactive({
  name:'张三',
  age:18,
  car:{
    name:'宝马',
    price:1000000
  }
})
const person2 = readonly(person);
const person3 = shallowReadonly(person);
function changeSum2(){
  sum2.value+=1;
}
</script>

<style scoped>


</style>


